<template>
  <div class="container">
      <div class="header">
        <div class="left">
          <el-icon class="el-icon-eleme"/>
          <div>Redis Manager<el-tag type="danger" effect="plain" size="mini" style="margin-left: 5px">bata 版</el-tag></div>
        </div>
        <div class="right">
          <div><el-input placeholder="please search key" @change="getKeyList" v-model="keyword"></el-input></div>
          <div><el-button type="primary" icon="el-icon-delete" circle></el-button></div>
        </div>
      </div>

      <div class="content">
        <div class="left-nav">
          <div class="title-nav">
            <div class="title">键列表</div>
            <div class="refresh"><el-button type="text" @click="getKeyList"><el-icon class="el-icon-refresh"></el-icon></el-button> </div>
          </div>
          <div class="left-list">
            <el-table
                :data="keyList"
                :show-header="false"
                height="100%"
                style="width: 100%"
                highlight-current-row
                @row-click="queryKeyInfo">
              <el-table-column
                  label="标签"
                  width="80">
                <template slot-scope="scope">
                  <el-tag effect="dark" :type="tagColor(scope.row.dataType)" style="min-width: 30px">{{ scope.row.dataType === null ? 'string' : scope.row.dataType }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                  prop="keyName"
                  label="键">
              </el-table-column>
              <el-table-column
                  label="过期时间"
                  width="80">
                <template slot-scope="scope">
                  <div v-if="scope.row.ttl !== -1">
                    <el-tag type="danger" style="min-width: 30px">{{ scope.row.ttl }} s</el-tag>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="main-nav">
          <div class="title-nav">
            <div class="title">值详情</div>
          </div>
          <div class="right-list" v-if="currentKey.dataType !== null">
            <div class="main-top-menu">
              <div class="mtm-left" >
                <el-tag effect="dark" :type="tagColor(currentKey.dataType)" style="min-width: 30px">{{ currentKey.dataType }}</el-tag>
                <div class="key-name">{{ currentKey.keyName }}</div>
                <div class="ttl-card"><el-icon class="el-icon-timer"></el-icon> {{ currentKey.ttl === -1 ? '永不过期' : currentKey.ttl + '秒'}}</div>
              </div>
              <div class="mtm-right">
                  <div>
                    <el-button
                      size="mini"
                      icon="el-icon-document-copy"
                      @click="copyKey">
                  </el-button>
                  </div>
              </div>
            </div>
            <div class="main-container">
              <div><pre>{{JSON.stringify(currentKey.value, null, 2)}}</pre></div>
              <div>{{currentKey.value}}</div>
            </div>
          </div>
          <div v-else>
            <el-empty description="请从左侧选择键" :image-size="120"></el-empty>
          </div>
        </div>
      </div>

      <div style="color: #a6979c;font-size: 12px;text-align: center;margin-top: -10px">©2023-2025 code by Mr.Hongtao</div>
  </div>
</template>

<script>
import {getPage, getKey} from '@/api/redis'
export default {
  name: "",
  data() {
    return {
      keyword: null,
      keyList: [],
      currentKey: {
        dataType: null,
        keyName: null,
        value: null,
        ttl: null
      }
    }
  },
  methods: {
    getKeyList() {
      getPage(this.keyword ?? "*").then(res => {
          this.keyList = res.data;
      })
    },
    queryKeyInfo(row) {
      getKey(row.keyName).then(res=>{
        this.currentKey = res.data;
        console.log("ddd" + this.currentKey)
      })
    },
    copyKey() {
      // 复制逻辑
      navigator.clipboard
          .writeText(this.currentKey.value)
          .then(() => {
            console.log("复制成功")
          })
          .catch((err) => {
            console.log("复制失败，请重试", err);
          });
      this.$message.success('已复制到剪贴板')
    },
    tagColor(dataType) {
      switch (dataType) {
        case 'string':
          return 'primary';
        case 'hash':
          return 'danger';
        case 'list':
          return 'info';
        case 'set':
          return 'warning';
        case 'zset':
          return 'success';
        default:
          return 'default';
      }
    }
  },
  created() {
    this.getKeyList();
  }
}
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background-color: #f3f5f8;
  .header {
    height: 6%;
    background-color: #ffffff;
    padding-left: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    .left {
      display: flex;
      align-items: center;
      justify-items: center;
      justify-content: space-around;
      div {
        margin: 0 10px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      justify-items: center;
      justify-content: right;
      margin-right: 30px;
      div {
        margin: 0 10px;
      }
    }
  }
  .content {
    margin: 10px 10px;
    height: calc(100vh - 6% - 30px);
    display: flex;
    justify-items: center;
    justify-content: space-around;
    .left-nav {
        width: 30%;
        height: 100%;
        background-color: #ffffff;
       .title-nav {
         height: 8%;
         margin: 0 30px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #f5f6fa;
       }
      .left-list {
        height: 92%;
        background-color: #42b983;
      }
    }

    .main-nav {
      width: calc(100% - 30%);
      height: 100%;
      background-color: #fff;
      .title-nav {
        height: 8%;
        margin: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f6fa;
      }
      .right-list {
        height: 92%;
        .main-top-menu {
          margin: 0 20px;
          padding: 0 10px;
          height: 10%;
          background-color: #f5f7fa;
          display: flex;
          align-items: center;
          justify-items: center;
          justify-content: space-between;
          .mtm-left {
            display: flex;
            align-items: center;
            .key-name {
              margin: 0 10px;
            }
            .ttl-card {
              color: #a6979c;
            }
          }
        }
        .main-container {
          height: 90%;
          margin: 20px;
        }
      }
    }
  }
}
</style>